<template>
	<view class="order">
		<!-- 新增车辆弹窗 -->
		<u-popup v-model="visible" mode="bottom" :safeAreaInsetBottom="true" :maskCloseAble="true"
			:closeable="true" height="50%" :mask="true" @close="close">
			<view class="">
				<got-order-popup ref="gotOrderPopup" @submit="submit" :state="this.orderItem.orderState"/>
			</view>
		</u-popup>
		<view class="top">
			<view class="left">
				<u-icon name="redo-filled" :size="30" color="rgb(94,94,94)"></u-icon>
				<view class="order-code">订单号:{{ orderItem.orderCode }}</view>
				<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
			</view>
			<view class="customer-name">下单用户：{{ orderItem.customerName }}</view>
		</view>
		<view class="item">
			<view class="content">
				<view class="title u-line-2">{{ orderItem.orderName }}</view>
				<view class="type">{{ orderItem.TypeName }}</view>
				<view class="consignee-name">收货人：{{ orderItem.consigneeName }}</view>
			</view>
			<view class="right">
				<view class="right-info">运费 {{orderItem.freightAmount}}¥</view>
				<view class="right-info">收货人电话 {{ConsigneeTel}}</view>
				<view class="right-info">距离出发点约{{this.distance}}公里</view>
			</view>
		</view>
		<view class="bottom">
			<view class="bottom-uper">
				<view class="delivery-time">订单开启时间: {{ orderItem.beginDate }}</view>
				<view class="remarks" v-if="orderItem.orderRemarks">订单备注: {{ orderItem.orderRemarks }}</view>
			</view>
			<view class="bottom-lower">
				<view class="more">
					状态：{{orderItem.orderState | statusOrderFilter}}
				</view>
				<view v-if="orderItem.orderState < 3 && role === 'driver' " class="logistics btn" @click="followOrder">跟踪订单</view>
				<view v-if="orderItem.orderState == 1 || orderItem.orderState > 4 " class="logistics btn" @click="handelApply">维权申报</view>
				<view v-if="orderItem.orderState < 4 && role === 'driver'" class="call-order btn" @click="call">呼叫订单</view>
				<view v-if="orderItem.orderState < 3 && role === 'driver' " class="got-order btn" @click="gotOrder">接到订单</view>
				<view v-if="orderItem.orderState == 4 && role !== 'driver'" class="got-order btn" @click="gotoPay">去付款</view>

				<view v-if="orderItem.orderState > 6 && orderItem.orderState<=7 " class="got-order btn" @click="gotoComment">去评价</view>
				<view v-if="orderItem.orderState === 3" class="got-order btn" @click="completeOrder">到达目的地</view>
			</view>
		</view>
		<template>
			<u-popup v-model="comment" mode="center">
				<view style="width: 100%">
					<u-field
									v-model="commentConent"
									label="评论："
									placeholder="请填写评论"
					>
					</u-field>
				</view>
				<br>
				<u-button style="width: 100%;" size="mini"  type="success" @click="toComment">
				评价订单
			</u-button>
				<u-button style="width: 100%;" size="mini"  type="warning" @click="comment=false">
					取消评价
				</u-button>
			</u-popup>
		</template>
	</view>
</template>

<script>
	import {commentOrder, pay} from "../../../api/user/user";
	const app = getApp()
	var QQMapWX = require('../../../components/mi-map/qqmap-wx-jssdk.min.js')
	var qqmapsdk = new QQMapWX({
		key: 'ZPQBZ-RD7WR-XJ7WM-WOUK2-OZRKF-H3FL5'
	})
	import {
		gotOrderTransport,
		completeTransport
	} from '../../../api/driver/transport.js'
	import {
		verifyHandleApply
	} from '../../../api/driver/handel.js'
	import gotOrderPopup from './gotOrderPopup.vue'
	import {
		mapGetters
	} from 'vuex'
	export default {
		props: {
			orderItem: {
				type: Object,
				default () {
					return {}
				}
			},
			carCode: {
				type: String,
				default() {
					return ''
				}
			},
			driverCode: {
				type: String,
				default() {
					return ''
				}
			}
		},
		filters: {
			statusOrderFilter(status) {
				const statusMap = {
					'0': '已下单',
					'1': '已付款',
					'2': '受理中',
					'3': '运输中',
					'4': '处理完毕',
					'5': '已收款',
					'6': '已结束',
					'7': '待评价',
					'8': '已评价'
				}
				return statusMap[status]
			}
		},
		components: {
			gotOrderPopup
		},
		data() {
			return {
				comment:false,
				commentConent:"",
				distanceDriver: 0, // 订单与司机的距离
				popupVisible: false //弹窗
			}
		},
		computed: {
			ConsigneeTel() {
				let pre = this.orderItem.consigneeTel.substr(0,7);
				return pre + '****';
			},
			distance() {
				this.getLocation();
				return this.distanceDriver;
			},
			visible() {
				return this.popupVisible;
			},
			...mapGetters([
				'userID',
				'name',
				'idNumber',
				'role'
			])
		},

		methods: {
			toComment(){
				let param={
					"comment":this.commentConent,
					"id":this.orderItem.id
				}
				commentOrder(param).then(res=>{
					console.log(res);
					if(res.body){
						uni.showToast({
							icon: 'success',
							title: "评价成功",
							duration: 2000});
					}
				})
			},
			//评价
			gotoComment(){
			 this.comment=true;
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: this.orderItem.consigneeTel //仅为示例
				});
			},
			followOrder() {
				const latitude = parseFloat(this.orderItem.latitude);
				const longitude = parseFloat(this.orderItem.longitude);
				console.log(latitude,longitude);
				uni.openLocation({
				    latitude: latitude,
				    longitude: longitude,
				    success: function () {
				        console.log('success');
				    }
				});
				
			},
			gotoPay(){
				pay(this.orderItem).then(res=>{
					uni.showToast({
						icon: 'success',
						title: '支付成功',
						duration: 3000
					});
					setTimeout(()=>(location.reload()),1500)
				})
			},
			handelApply() {
				verifyHandleApply({orderCode: this.orderItem.orderCode, userId: this.userID})
				.then(res => {
					if (res.header.code == 200) {
						uni.navigateTo({
							url: `../handel/handelApply?orderCode=${this.orderItem.orderCode}`,
							animationType: 'pop-in',
							animationDuration: 200
						});
					} else {
						uni.showToast({
						    title: '该订单已被申诉',
						    duration: 2000,
							icon: 'none'
						});
					}
				})
			},
			gotOrder() {
				this.popupVisible = true;
			},
			completeOrder() {
				this.popupVisible = true;
			},
			submit(data) {
				if(this.orderItem.orderState === 2) {
					this.start(data)
				}
				if(this.orderItem.orderState === 3) {
					this.complete(data);
				}
			},
			start(data) {
				let _self = this;
				console.log(this.orderItem);
				let consigneeTel = this.orderItem.consigneeTel;
				let lastFour = consigneeTel.slice(7)
				console.log(consigneeTel);
				console.log(lastFour);
				if (lastFour != data.telLastFour) {
					uni.showToast({
						title: '请检查号码是否正确...',
						icon: 'none',
						duration: 1500
					});
					return;
				}
				this.close();
				delete this.orderItem.id;
				delete this.orderItem.createDate;
				delete this.orderItem.modifyDate;
				Object.assign(this.orderItem,data);
				this.orderItem.orderState = 3;
				console.log(this.orderItem);
				gotOrderTransport({transprot: JSON.stringify(this.orderItem)})
				.then(res => {
					if(res.header.code === 200) {
						uni.showToast({
							title: '请开始运输...',
							icon: 'none',
							duration: 1500
						});
						let data = {
							driverCode: _self.driverCode,
							carCode: _self.carCode,
							state: 3,
							isTransport: true
						}
						// 更改司机状态为正在运输
						this.$store.dispatch('driverInfo/CHANGETRANSPORTSTATE',data);
					}else {
					}
				})
			},
			complete(data) {
				this.close();
				let _self = this;
				delete this.orderItem.id;
				delete this.orderItem.createDate;
				delete this.orderItem.modifyDate;
				Object.assign(this.orderItem,data);
				completeTransport({transprot: JSON.stringify(this.orderItem)})
				.then(res => {
					if(res.header.code === 200) {
						uni.showToast({
							title: '结束运输...',
							icon: 'none',
							duration: 1500
						});
						
						let data = {
							driverCode: this.driverCode,
							carCode: this.carCode,
							state: 4,
							isTransport: false
						}
						// 从store中删除此订单信息
						this.$store.dispatch('driverOrderInfo/REMOVEORDER',this.orderItem);
						// 更改司机状态为空闲
						this.$store.dispatch('driverInfo/CHANGETRANSPORTSTATE',data);
					}else {
					}
				})
			},
			// 弹窗关闭
			close() {
				console.log("弹窗关闭");
				this.popupVisible = false;
			},
			// 查询现在的位置
			getLocation() {
				let this_ = this
				uni.getLocation({
					type: 'gcj02', // 返回国测局坐标
					success: function(res) {
						this_.calculateDistance(res)
					},
					fail: function(e) {
						uni.showToast({
							icon: 'none',
							title: '获取地址失败, 请检查是否开启定位权限~~'
						})
					}
				})
			},
			// 距离计算
			async calculateDistance({
				latitude,
				longitude
			}) {
				qqmapsdk.calculateDistance({
					from: {
						latitude: latitude,
						longitude: longitude
					},
					to: [{
						latitude: parseFloat(this.orderItem.latitude),
						longitude: parseFloat(this.orderItem.longitude),
					}],
					sig: 'ZPQBZ-RD7WR-XJ7WM-WOUK2-OZRKF-H3FL5',
					success: res => {
						this.distanceDriver = (res.result.elements[0].distance / 1000).toFixed(2);
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.order {
		width: 98%;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;

		.top {
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				.order-code {
					margin: 0 10rpx;
					font-size: 28rpx;
					font-weight: bold;
				}
			}

			.customer-name {
				color: $u-type-warning-dark;
			}
		}

		.item {
			display: flex;
			margin: 20rpx 0 0;

			.content {
				flex: 2;

				.title {
					font-size: 28rpx;
					line-height: 50rpx;
				}

				.type {
					margin: 10rpx 0;
					font-size: 28rpx;
					color: $u-tips-color;
				}

				.consignee-name {
					margin: 10rpx 0;
					font-size: 28rpx;
					color: $u-tips-color;
				}

			}

			.right {
				flex: 1.5;
				margin-left: 10rpx;
				padding-top: 20rpx;
				text-align: right;

				.right-info {
					font-size: 24rpx;
					margin-top: 4rpx;
					margin-bottom: 10rpx;
				}

			}
		}

		.total {
			margin-top: 20rpx;
			text-align: right;
			font-size: 24rpx;

			.total-price {
				font-size: 32rpx;
			}
		}

		.bottom {

			.bottom-uper {
				margin-top: 10rpx;

				.delivery-time {
					color: $u-type-error-dark;
					font-size: 24rpx;
					margin-bottom: 5rpx;
				}

				.remarks {
					margin-top: 5rpx;
					color: $u-type-info-dark;
					font-size: 24rpx;
				}
			}

			.bottom-lower {
				display: flex;
				margin-top: 30rpx;
				padding: 0 10rpx;
				justify-content: space-around;
				align-items: center;

				.btn {
					line-height: 52rpx;
					width: 160rpx;
					border-radius: 26rpx;
					border: 2rpx solid $u-border-color;
					font-size: 26rpx;
					text-align: center;
					color: $u-type-info-dark;
				}

				.call-order {
					color: $u-type-warning-dark;
					border-color: $u-type-warning-dark;
				}
			}

		}
	}
</style>
